<template>
<h1>{{info}}</h1>
<!--v-model="变量",让控件的值和变量进行双向绑定(变量会影响控件的值, 控件的值改变也会影响变量)-->

  <input type="text" v-model="info">
  <h2>登录页面</h2>
  用户名:<input type="text" placeholder="请输入用户名" v-model="user.username"><br>
  密码:<input type="password" placeholder="请输入密码" v-model="user.password"><br>
  <input type="button" value="登录" @click="login()">
</template>

<script setup>

import {ref} from "vue";

const user = ref({username:"",password:""});

const login = ()=>{
  console.log(user.value.username+":"+user.value.password);
}


const info = ref('双向绑定');
</script>

<style scoped>

</style>